<template>
  <default-layout>
    <header-back :text="title" slot="header" :fixed="false" style="z-index: 5;"></header-back>
    <yd-scrollnav slot="header" :index="current" :callback="change" :current-color="color">
      <yd-scrollnav-panel :label="item.canc03" v-for="(item, key) in menus" :key="key"></yd-scrollnav-panel>
    </yd-scrollnav>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="disabledScroll"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check="false"
      slot="main"
      class="scroll-view">
      <div class="news-list">
        <router-link :to="{name: 'newsListDetail', query: {canc11: val.canc11, cand01: val.cand01}}" class="item" v-for="(val, key) in list" :key="key">
          <span class="title">{{val.cand03}}</span>
          <div class="content">
            <span>{{$dateFormat(val.cand07).format('YYYY-MM-DD')}}</span>
            <span>{{val.cand13}} 阅读</span>
          </div>
        </router-link>
      </div>
      <loading-text v-if="loading"></loading-text>
      <finish-text v-if="noMore"></finish-text>
      <empty v-if="empty"></empty>
      <yd-backtop></yd-backtop>
    </div>
    <transition name="router" mode="out-in">
      <router-view class="fixed-router" :key="$route.fullPath"></router-view>
    </transition>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../components/header-back/header-back.vue'
  import LoadingText from '../../components/loading-text/loading-text.vue'
  import FinishText from '../../components/finish-text/finish-text.vue'
  import {http} from '../../common/js/util'
  import {infinite} from '../../common/js/mixin'
  import Empty from '../../components/empty/empty.vue'
  import DefaultLayout from '../../layouts/default-layout/default-layout'
  import {MAIN_COLOR} from '../../common/js/config'

  export default {
    computed: {
      ...infinite
    },
    components: {
      DefaultLayout,
      Empty,
      FinishText,
      LoadingText,
      HeaderBack},
    data() {
      return {
        /* 以下五个参数为上拉加载页面必需的参数 */
        loading: true,
        page: 1,
        size: 10,
        total: 0,
        list: [],
        /* 以上五个参数为上拉加载页面必需的参数 */
        menus: [],
        current: 0,
        showArrow: false,
        color: MAIN_COLOR,
        title: ''
      }
    },
    methods: {
      loadMore() {
        if (this.page === 1) this.list = []
        http({
          method: 'post',
          url: '/sapi/news/get/article/list',
          data: {
            canc11: this.menus[this.current].canc11,
            page: this.page,
            rows: this.size
          }
        }, loading => {
          this.loading = loading
        }).then(res => {
          this.list = this.list.concat(res.data.articleList)
          this.total = res.data.articleListPageBean.totalCount
          this.page++
        })
      },
      getTitle() {
        var title = this.$route.params.id
        if (title === 'DYZJ') {
          this.title = '党员之家'
        } else if (title === 'DAGL') {
          this.title = '档案管理'
        } else if (title === 'RSDL') {
          this.title = '人事代理'
        } else if (title === 'JXJY') {
          this.title = '继续教育'
        } else if (title === 'JYCY') {
          this.title = '就业创业'
        } else if (title === 'ZXZW') {
          this.title = '中心政务'
        }
      },
      async getMenus() {
        const res = await http({
          method: 'post',
          url: '/sapi/news/get/all/article/column/child/list',
          data: {
            type: this.$route.params.id
          }
        })
        this.menus = res.data.childrenArticleColumn
      },
      change(key) {
        this.current = key
        this.$router.replace({
          name: 'newsList',
          params: {
            id: this.$route.params.id
          },
          query: {
            id: this.menus[this.current].canc11
          }
        })
        this.page = 1
        this.loadMore()
      }
    },
    async created() {
      this.getTitle()
      await this.getMenus()
      let current = this.menus.findIndex(item => item.canc11 === this.$route.query.id)
      if (current === -1) {
        this.loadMore()
      } else {
        this.current = current
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  .news-list{
    background: #fff;
    .item{
      display: block;
      padding: .2rem .2rem;
      border-bottom: 1px solid #ededed;
      @include active;
      &:first-child{
        border-top: 1px solid #ededed;
      }
      .title{
        font-size: .3rem;
        display: inline-block;
        width: 100%;
        @include ellipsis;
        padding: 0 0 .1rem 0;
      }
      .content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666;
        .xf-liulan{
          font-size: .26rem;
        }
      }
    }
  }
  .links{
    margin: 0 0 .15rem 0;
    padding: .2rem .1rem;
    background: #fff;
    display: flex;
    .item{
      padding: .1rem;
      width: 50%;
      display: block;
      img{
        width: 100%;
      }
    }
  }
</style>
